<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div class="fileimg">
    <a target="_blank" href="XXX">
        <img  class="personal-img"  th:src=" @{/img/aaa.png}" style="width: 200px;height: 200px;margin-left: 300px;margin-top:-80px;"/>
    </a>
</div>
<div class="rc"><i class="rotate"></i>旋转</div>
<script th:src="@{/js/jquery.min.js}"></script>
<script th:src="@{/js/bootstrap.min.js}"></script>
<script th:src="@{/js/plugins/metisMenu/jquery.metisMenu.js}"></script>
<script th:src="@{/js/plugins/slimscroll/jquery.slimscroll.min.js}"></script>
<script th:src="@{/js/jquery.contextMenu.min.js}"></script>
<script th:src="@{/ajax/libs/blockUI/jquery.blockUI.js}"></script>
<script th:src="@{/ajax/libs/layer/layer.min.js}"></script>
<script th:src="@{/ruoyi/js/ry-ui.js?v=4.1.0}"></script>
<script th:src="@{/ruoyi/js/common.js?v=4.1.0}"></script>
<script th:src="@{/ruoyi/index.js}"></script>
<script th:src="@{/ajax/libs/fullscreen/jquery.fullscreen.js}"></script>
<script th:src="@{/js/echarts/echarts.min.js}"></script>
<script th:src="@{/js/echarts/echarts-gl.min.js}"></script>
<script>
    $(function(){
        var rIndex=0;
        $(".rotate").click(function(){
            var _this=$(this);
            rIndex++;
            getRotate(_this,rIndex);
            return false;
        });

        function getRotate(_this,index){
            var degree=index*90;
            _this.parents().find("img.personal-img").css('transform','rotate('+degree+'deg)');
            _this.parents().find("img.personal-img").css('-ms-transform','rotate('+degree+'deg)');
            _this.parents().find("img.personal-img").css('-webkit-transform','rotate('+degree+'deg)');
            _this.parents().find("img.personal-img").css('-moz-transform','rotate('+degree+'deg)');
        }
    })

</script>
</body>
</html>